<template>
    <div v-if="visible" id="floatWindow" @click="changeVisible" :class="visible === true ? 'showFloatWindow' : (visible === false ? 'hideFloatWindow' : '')">
        <div id="displayBlock" @click.stop>
            <component :is="innerComponent"></component>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import FlexProduct from '@/components/FlexProduct'
import FlexItem from '@/components/FlexItem'

export default {
    components: {
        FlexProduct,
        FlexItem
    },
    computed: {
        ...mapState({
            visible: state => state.floatWindow.visible,
            innerComponent: state => state.floatWindow.innerComponent
        })
    },
    methods: {
        ...mapMutations({
            changeVisible: 'floatWindow/changeVisible'
        })
    }
}
</script>

<style lang="scss" scoped>
@keyframes showWindow
{
    0%
    {
        opacity: 0;
    }
    100%
    {
        opacity: 1;
    }
}

@keyframes hideWindow
{
    0%
    {
        opacity: 1;
    }
    100%
    {
        opacity: 0;
    }
}

#floatWindow
{
    opacity: 0;
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    height: 100vh;
    backdrop-filter: blur(5px);
    background-color: rgba(0, 0, 0, 0);
    transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
    overflow: hidden;
}

.showFloatWindow
{
    visibility: visible !important;
    animation: showWindow 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}

.hideFloatWindow
{
    animation: hideWindow 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}

#displayBlock
{
    position: absolute;
    top: 5%;
    left: 10%;
    width: 80%;
    height: 90%;
    border-radius: 2px;
    background-color: #efe7db;
    overflow-y: scroll;
    overscroll-behavior: contain;
    transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

@keyframes showDisplayItem
{
    0%
    {
        transform: translateY(-20px);
        opacity: 0;
    }
    100%
    {
        transform: translateY(0);
        opacity: 1;
    }
}

.displayItem
{
    animation: showDisplayItem 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
    opacity: 0;
}
</style>